<template>
  <div>
    <h3>小案例</h3>
    <input v-if="isSearch" ref="inp" type="text">
    <button v-else @click="change">点击搜索</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isSearch: false
    }
  },
  methods: {
    change() {
      this.isSearch = true
      // 因为dom异步更新 所以利用this.$nextTick()来获取最新的dom
      this.$nextTick(() => {
        this.$refs.inp.focus()
      })
      
    }
  }
}
</script>

<style>

</style>